<template>
  <div class="search">
    <!-- 当点击时显示侧边栏 -->
    <ToggleSidebar :color="color" />
    <!-- 搜索框 -->
    <input type="text" placeholder="范玮琪" @focus="search()" />
    <!-- 搜索图标 -->
    <i class="iconfont icon-tinggeshiqu1"></i>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color:
        "display: inline-block; font-size: 0.42rem width:auto;height:auto;background-color: #e7e3e4;",
    };
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.28rem;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  padding: 0.26rem 0.12rem 0.32rem 0.3rem;
  background-color: #e7e3e4;
  z-index: 9999;
  i::before {
    font-size: 0.42rem;
  }
  input {
    height: 0.68rem;
    padding: 0.2rem 0.2rem 0.2rem 0.64rem;
    border-radius: 0.5rem;
    font-size: 0.26rem;
    width: calc(100% - 0.42rem - 0.42rem);
    background: url("../../assets/search.png") no-repeat white;
    background-size: 0.26rem;
    background-position: 0.26rem;
  }
}
</style>